<template>
  <div class="login">
    <el-form :model="form" :rules="rules" ref="form" class="form-box">
      <h3 class="tle">登录</h3>

      <el-form-item prop="userName">
        <el-input type="text" maxlength="20" v-model="form.userName" placeholder="用户名"></el-input>
      </el-form-item>

      <el-form-item prop="userPwd">
        <el-input type="password" maxlength="8" v-model="form.userPwd" placeholder="密码"></el-input>
      </el-form-item>

      <el-checkbox class="rmbPwd" v-model="checked">记住密码</el-checkbox>

      <el-form-item class="clear-margin-bot">
        <el-button class="btn" type="primary" @click="login" :loading="loading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表单数据
      form: {
        userName: "admin", // 用户名
        userPwd: "123456", // 密码
      },
      // 表单验证
      rules: {
        // 用户名验证
        userName: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        // 登录密码验证
        userPwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      checked: true, // 是否记住密码
      loading: false,
    };
  },
  methods: {
    // 登录
    login() {
	  var obj={
	      uname:this.form.userName,
	      upwd:this.form.userPwd,
	  }
	  if(!obj.uname){
	     this.$message.error('请输入用户名')
	     return
	  }
	  if(!obj.upwd){
	     this.$message.error('请输入密码')
	     return
	  }
	  
	  const loading = this.$loading({
	    text: '加载中',
	    background: 'rgba(255, 255, 255, 0.1)',
	    spinner: 'el-icon-loading',
	    customClass: 'loadingclass'
	  })
	
	  	this.axios.post(this.$domain+'/index/login',obj).then(res=>{
	  		let result = res.data
	  		if(result.code==200){
	  			this.$message.success(result.msg)
	  			sessionStorage.setItem('token',result.data.token)
	  			sessionStorage.setItem('user_name','admin')
	  			this.$router.push('/homeSet/notic')
				// this.$router.push('/home')
	  		}
	  		loading.close()
	  	})
	  
    },
  },
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
}
.form-box {
  width: 400px;
  height: auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.tle {
  display: block;
  width: 100%;
  height: auto;
  font-size: 30px;
  text-align: center;
  margin-bottom: 22px;
}

.rmbPwd {
  margin-bottom: 22px;
}

.btn {
  display: block;
  width: 100%;
  height: auto;
  background-color: #01a5a7;
  color: #fff;
  border: none !important;
}

.clear-margin-bot {
  margin-bottom: 0;
}
</style>
<style>
/* 修改多选框选中后的颜色 */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #01a5a7;
  border-color: #01a5a7;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #01a5a7;
}
.el-checkbox.is-bordered.is-checked {
  border-color: #01a5a7;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #01a5a7;
}
</style>